<template>
	<view class="container">
		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" label-width="90px">
				<uni-forms-item label="故障类型" required name="faultTypeIds">
					<uni-data-picker placeholder="请选择故障类型" popup-title="请选择故障类型" :localdata="faultSelect"
						v-model="valiFormData.faultTypeIds" @change="onchange" @nodeclick="onnodeclick"
						@popupopened="onpopupopened" @popupclosed="onpopupclosed" :map="{text:'faultName',value:'id'}">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="处理描述" name="handleDesc">
					<uni-easyinput type="textarea" v-model="valiFormData.handleDesc" placeholder="处理描述"  />
				</uni-forms-item>
				<uni-forms-item label="图片" name="fileList">
					<view class="pic">
						<view class="uploadGroup">
							<view class="box" v-for="(item,index) in fileList" :key="index">
								<image :src="configUrl+item.filePath" alt="" mode="aspectFill"
									@click="clickImg(index,'fileList')" />
								<view class="close" @click="closFun(index,'fileList')">x</view>
							</view>
							<view class="box add" @click="addFlie('fileList')">
								<image src="@/static/image/img10.png" alt="" mode="aspectFill" />
							</view>
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('valiForm')" :disabled="submitDisabled">提交</button>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	export default {
		data() {
			return {
				title: '登录适配',
				valiFormData: {
					handleDesc: '',
					handleState:'',
					faultTypeIds: '',
					faultTypeRootIds:'',
					appendixName:'',
					appendixUrl:''
				},
				submitDisabled: false,
				fileList: [],
				faultSelect: [],
				evaluateIs:'',
				evaluates: [{
					text: '不满意',
					value: 0
				}, {
					text: '满意',
					value: 1
				}],
				// 校验规则
				rules: {
					faultTypeIds: {
						rules: [{
							required: true,
							errorMessage: '故障类型不能为空'
						}]
					},
					
					
				},
				id: '',
				configUrl: '',
			}
		},
		created() {
			// this.getList()
			this.configUrl = config.baseUrl
		},
		onLoad(options) {
			console.log('接收到的参数', options);

			this.id = options.id; // 获取第一个参数值
			if (this.id) {
				this.getInfo()
			}

		},
		methods: {
			async getInfo() {
				await this.request({
					'url': '/wx/syn/faultSelect',
					'method': 'get',
				}).then(res => {
					console.log(res)
					if (res && res.code == 200) {
						// this.list = res.info
						this.faultSelect = this.treeDataTranslate(res.select)
					}
				}).catch(err => {
				
				})
			},
			getList() {
				console.log(this.$store.getters.productId)
				this.request({
					'url': '/wx/product/info/' + this.$store.getters.productId,
					'method': 'get',
				}).then(res => {
					console.log(res)
					if (res && res.code == 200) {
						// this.list = res.info
						this.valiFormData.productName = res.info.code
					}
				}).catch(err => {

				})
			},
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log(e)
				let result=e.detail.value
				let parentIds=''
				if(result.length>1){
					for(let i=0;i<result.length-1;i++){
						parentIds+=result[i].value
					}
				}
				
				this.valiFormData.faultTypeRootIds=parentIds
			},
			treeDataTranslate(data, id = 'id', pid = 'parentId') {
				var res = []
				var temp = {}
				for (var i = 0; i < data.length; i++) {
					temp[data[i][id]] = data[i]
				}
				for (var k = 0; k < data.length; k++) {
					if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
						if (!temp[data[k][pid]]['children']) {
							temp[data[k][pid]]['children'] = []
						}
						if (!temp[data[k][pid]]['_level']) {
							temp[data[k][pid]]['_level'] = 1
						}
						data[k]['_level'] = temp[data[k][pid]]._level + 1
						temp[data[k][pid]]['children'].push(data[k])
					} else {
						res.push(data[k])
					}
				}
				return res
			},
			//选择本地图片
			addFlie(list) {
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(res);
						let tempFilePaths = res.tempFilePaths
						tempFilePaths.forEach((tempFile) => {
							// console.log(tempFile.path, tempFile.name)
							uni.uploadFile({
								url: config.baseUrl + '/file/uploadFileInterface',
								filePath: tempFile, //接受的是数组
								name: 'file',
								method: "POST",
								header: {
									'token': this.$store.getters.token,
								},
								success: (uploadFileRes) => {
									//接口返回的数据
									let data = JSON.parse(uploadFileRes.data)
									console.log(data);
									this[list].push({
										// id: data.map.id,
										fileName: data.map.fileName+'.'+data.map.filePath.split('.')[data.map.filePath.split('.').length-1],
										filePath: data.map.filePath
									})
									this.$refs.valiForm.setValue(list, this[
										list]) //手动将图片值加入到uni-forms的校验
			
								},
								fail(err) {
									console.log(err);
								}
							});
						})
					}
				});
			},
			//删除
			closFun(e, list) {
				this[list].splice(e, 1)
			},
			//预览
			clickImg(index, list) {
				let listData = this[list].map((item) => config.baseUrl + item.filePath)
				uni.previewImage({
					current: index,
					urls: listData
				})
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					let appendixUrl = []
					let appendixName = []
					if (this.fileList.length) {
						for (let i = 0; i < this.fileList.length; i++) {
							appendixUrl.push(this.fileList[i].filePath)
							appendixName.push(this.fileList[i].fileName)
						}
					}
					this.request({
						'url': '/wx/syn/handle',
						'method': 'post',
						'data': {
							id:this.id,
							productId: this.$store.getters.productId,
							handleDesc: res.handleDesc,
							handleState: 1,
							faultTypeIds:res.faultTypeIds,
							faultTypeRootIds:this.valiFormData.faultTypeRootIds,
							appendixUrl: appendixUrl.toString(),
							appendixName: appendixName.toString(),
							
						}
					}).then(res => {
						console.log(res)
						if (res && res.code == 200) {
							// this.list = res.info
							// this.valiFormData.productModel = res.info.model
							uni.showToast({
								title: '添加成功'
							})
							setTimeout(() => {
								uni.$emit("getlist") //这里可以传个空,也可以传值过去
								uni.navigateBack()
								this.submitDisabled = false
							}, 1500)
						}
					}).catch(err => {
						this.submitDisabled = false
					})
				}).catch(err => {
					console.log('err', err);
				})
			},

		}
	}
</script>

<style>
	.container {
		padding: 15px;
		background-color: #fff;
		height: 100%;
		box-sizing: border-box;
	}

	.fileItem {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.fileLeft,
	.fileRight {
		display: flex;
		align-items: center;
	}

	.fileLeft {
		width: 80%;
	}

	.fileRight {
		width: 60px;
	}

	.fileName {
		width: 173px;
		word-wrap: break-word;
		white-space: pre-wrap;
	}
	.uploadGroup {
		display: flex;
		/* padding: 30rpx; */
		flex-wrap: wrap;
	}
	
	.uploadGroup .box {
		width: 200rpx;
		height: 200rpx;
		background-color: #eee;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		position: relative;
	}
	
	.box image {
		width: 100%;
		height: 100%;
	}
	
	.pic {
		background-color: #fff;
	}
	
	.add {
		font-size: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #888;
	}
	
	.add image {
		width: 40%;
		height: 40%;
	}
	
	.close {
		position: absolute;
		right: 0;
		top: 0;
		width: 50rpx;
		height: 50rpx;
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		border-radius: 0 0 0 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 12rpx;
		box-sizing: border-box;
		padding-bottom: 15rpx;
	}
	/* .is-disable{
		background-color: #fff!important;
		color: #e5e5e5!important;
	} */
	.uni-forms-item__content .is-disabled {
		background-color:#fff!important;
		color: #333!important;
	}
	.example .uni-forms-item__label {
	  font-size: 16px;
	}
	
	.example .uni-forms-item__error {
	  font-size: 14px;
	
	}
</style>